<template>
  <div ref="businessFrame" :class="{'business-frame':true,'border-and-shadow':true,'fold':isFold}">
    <div class="business-name">
      <span>{{ businesses.name }}</span>
      <button @click="onFold">{{ isFold ? '↓' : '↑' }}</button>
      <input type="checkbox" v-model="checkAll">
    </div>
    <message-frame v-for="(item, idx) in businesses.messages"
                   :message="item" :key="idx"></message-frame>
  </div>
</template>

<script>
import MessageFrame from '../MessageFrame/index.vue'

export default {
  name: 'BusinessFrame',
  components: {MessageFrame},
  props: {
    businesses: {
      type: [Object],
      required: true
    }
  },
  data () {
    return {
      isFold: false
    }
  },
  computed: {
    checkAll: {
      get () {
        return this.businesses.messages.some(item => item.enabled)
      },
      set (val) {
        this.businesses.messages.forEach(item => {
          item.enabled = val
        })
      }
    }
  },
  methods: {
    onFold () {
      this.isFold = !this.isFold
      // let businessFrame = this.$refs.businessFrame
    }
  }
}
</script>

<style scoped>
.fold {
  height: 25px;
}

.business-name {
  padding-bottom: 5px;
}

.business-name span {
  font-size: 1.4em;
}

.business-name button {
  position: relative;
  font-size: 0.7em;
  top: -4px;
}

.business-name input[type="checkbox"] {
  width: 16px;
  height: 16px;
}
</style>
